<template>
  <div class="mapyHaeder">
     <div class="mapytop">
    <span class="iconfont" id="shous">&#xe627;</span>
    <input type="text" placeholder="搜索附近充电点/门店" class="input">
    </div>
    <div class="button">
      <div class="button-left"> 
      <span class="iconfont" id="kef">&#xe65a;</span>
      
      </div>
       <div class="button-left">
      <span class="iconfont" id="fank">&#xe631;</span>
      </div>
      <div class="button-mi"><span>扫码充电</span></div>
      <div class="button-ri"><span class="iconfont" id="dingw">&#xe609;</span> </div>
    </div>
  </div>
</template>



<script>
 
export default {
  name: 'mapyHaeder',
   
  }

</script>
 
<style scoped>
.mapyHaeder{
    position: absolute;
    top: 10px;
    left: 0px;
    z-index: 1;
    width: 100%;


}
.mapytop{
    position: fixed;
    left: 8%;
    top: 5px;
    width: 100%;
}
.input{
     width: 70%;
    height: 25px;
    border-radius: 20px;
    position: absolute;
  
    top: 5px;
     padding-left: 40px;
    
}
#shous{
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 2;
}

.button{
    z-index: 2;
     position:fixed;
    left: 0px;
    bottom: 30px;
    height: 80px;
    width: 100%;
}
.button-left{
    width: 40px;
    height: 40px; 
    border-radius: 35px;
    background-color:#fff;
    text-align: center;
    margin-left: 20px;
    display: inline-block;
   
  
}
#kef,#fank{
   font-size: 25px;
   position: relative;
   top: 6px;
  
}
#dingw{
    font-size: 27px;
    position: relative;
   top: 6px;
}
.button-mi{
 width: 70px;
 height: 70px;
 border-radius: 35px;
 background-color:chocolate;

    position: relative;
    top: -60px;
    left: 151px;
  
}
.button-mi span{
    position: absolute;
    top: 35px;
    left: 5px;
    color: cornsilk;
}
.button-ri{
     width: 40px;
    height: 40px; 
    border-radius: 35px;
       background-color:#fff;
    text-align: center;
   position: absolute;
   top: 0px;
   right: 30px;
    z-index: 20;
}
</style>
